<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>register</title>
    <link rel="stylesheet" href="../css/header.css"/>
    <link rel="stylesheet" href="../css/footer.css"/>
    <link rel="stylesheet" href="../css/login.css"/>
    <script src="../js/angular.min.js"></script>
    
</head>
<body>
<!-- 页头容器-->
<?php 
    include 'header1.php';
?>
<!-- 内容容器-->
<div class="content">
    <p class="place">您当前的位置：首页 > 会员注册</p>
    <div class="c_login" style="overflow: hidden">
        <div class="left">
            <div class="mc">
                <a href="#">会员中心</a>
            </div>
            <div class="ml">
                <a href="#">会员登陆</a>
            </div>
            <div class="ml">
                <a href="#">会员注册</a>
            </div>
        </div>
        <div class="right">
            <form action="register.php" method="post" id="myForm" ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
                <table width="100%">
                    <tbody>
                    <tr>
                        <td class="name">会 员 名：</td>
                        <td class="frame">
                            <input type="text" class="null" name="vname" size="30" ng-model="vname" required/>
                            <span style="color:red" ng-show="myForm.vname.$dirty && myForm.vname.$invalid">
                                <span ng-show="myForm.vname.$error.required">*会员名不能为空</span>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="name">密&nbsp;&nbsp;码：</td>
                        <td class="frame">
                            <input type="password" class="null" size="30" id="pwd" ng-model="password" ng-minlength="6"
                            ng-maxlength="20" name="password" required/>
                            <span style="color: red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
                                <span ng-show="myForm.password.$error.required">*密码不能为空</span>
                                <span ng-show="myForm.password.$error.minlength">*密码长度不小于6</span>
                                <span ng-show="myForm.password.$error.maxlength">*密码长度不超过20</span>
                            </span>

                        </td>
                    </tr>
                    <tr>
                        <td class="name">确认密码：</td>
                        <td class="frame">
                            <input type="password" class="null" size="30" name="confirm"   ng-model="passwordagain" required/>
                            <span style="color: red" ng-show="myForm.password.$valid">
                                <span ng-show="passwordagain!=password">*两次密码输入不一致</span>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="name">联系电话：</td>
                        <td class="frame">
                            <input type="text" class="null" size="30" name="phone" ng-model="phone" ng-minlength="11"
                            ng-maxlength="11" required />
                            <span style="color: red" ng-show="myForm.phone.$dirty && myForm.phone.$invalid">
                                <span ng-show="myForm.phone.$error.required">*联系电话不能为空</span>
                                <span ng-show="myForm.phone.$error.minlength">*联系电话长度为11</span>
                                <span ng-show="myForm.phone.$error.maxlength">*联系电话长度为11</span>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="name">联系地址：</td>
                        <td class="frame">
                            <input type="text" class="null" name="address" size="50" ng-model="address" required/>
                            <span style="color:red" ng-show="myForm.address.$dirty && myForm.address.$invalid">
                                <span ng-show="myForm.address.$error.required">*联系地址不能为空</span>
                            </span>
                        </td>
                    </tr>

                    <tr>
                        <td style="height: 50px"></td>
                        <td>
                            <input ng-click="submit(myForm.$valid)" type="button" value="注册" class="sub" ng-disabled="myForm.vname.$dirty && myForm.vname.$invalid
                             || myForm.password.$dirty && myForm.password.$invalid || password != passwordagain || 
                             myForm.phone.$dirty && myForm.phone.$invalid || myForm.address.$dirty && 
                             myForm.address.$invalid"/>
                               
                            
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>

</div>
<!-- 页尾容器-->
<?php include 'footer1.php' ?>

<script src="../js/jquery-3.1.1.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function($scope) {
        $scope.vname = '';
        $scope.password = '';
        $scope.submit=function (isValid){
            if (isValid) {
                myForm.submit();
            };
        }
       

    });

   
    // $(function(){
    //     // 初始化
    //     $('form').validate({
    //         onfocusout:function(ele){
    //             $(ele).valid();
    //         },
    //         rules:{
    //             vname:{
    //                 required:true
    //             },
    //             vpwd:{
    //                 required:true
    //             },
    //             confirm:{
    //                 required:true,
    //                 equalTo:'#pwd'
    //             },
    //             phone:{
    //                 required:true,
    //                 digits:true,
    //                 minlength:11,
    //                 maxlength:11
    //             },
    //             address:{
    //                 required:true
    //             }
    //         }
    //         // message:{
    //         //     vname:{
    //         //         required:'必填'
    //         //     }
    //         // },
    //         // errorElement: "span"
    //     })
    // })
</script>
</body>
</html>